<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>消息日志</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/daterange/daterangepicker.css'/>">
</head>
<body>
<div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>
    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <!-- dashboard tiles -->
                <div class="panel">
                    <div class="panel-heading">
                        <i class="fa fa-table"></i> 消息日志
                    </div>
                    <div class="panel-body">
                        <div class="tab-content pn br-n admin-form">
                            <div class="panel">
                                <div class="well well-sm mn">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-addon btn btn-default">创建日期</div>
                                                <input type="text" class="form-control input-sm w200"
                                                       id="dateTimeRange">
                                                <div class="input-group-addon btn btn-default">
                                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-addon btn btn-default">单号</div>
                                                <input type="text" class="form-control input-sm" placeholder="请输入单号"
                                                       v-model="queryInfo.relationNo">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-addon btn btn-default">状态</div>
                                                <select class="form-control input-sm" v-model="queryInfo.dealStatus">
                                                    <option value="">全部状态</option>
                                                    <option :value="item.key" v-for="item in status">{{item.value}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-addon btn btn-default">类型</div>
                                                <select class="form-control input-sm" v-model="queryInfo.type">
                                                    <option value="">全部类型</option>
                                                    <option :value="item.key" v-for="item in types">{{item.value}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-hover table-condensed">
                                <thead>
                                <tr>
                                    <th>单号</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>处理次数</th>
                                    <th>内容</th>
                                    <th>失败原因</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in messageLogs">
                                    <td>{{item.relationNo}}</td>
                                    <td>{{item.type}}</td>
                                    <td>{{item.dealStatus}}</td>
                                    <td>{{item.dealTimes}}</td>
                                    <td>{{item.content}}</td>
                                    <td>{{item.dealMsg}}</td>
                                    <td>{{item.createdTime}}</td>
                                    <td><input class="btn btn-danger btn-sm" type="button" value="重置" v-on:click="reset(item.id)" v-if="item.dealStatus == 4"></td>
                                </tr>
                                <tr>
                                    <td class="text-center" colspan="20" v-if="messageLogs.length == 0">没有数据 ！</td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="20">
                                        <div class="table-responsive">
                                            <div id="pageMenu"></div>
                                        </div>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
</div>
</section>
</section>

</div>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>
<script src="<@s.url '/assets/plugins/daterange/moment.js'/>"></script>
<script src="<@s.url '/assets/plugins/daterange/daterangepicker.js'/>"></script>
<script>
    var app = new Vue({
        el: '#main',
        data: {
            userInitCompleted: 0, // 用户是否初始化完成
            queryInfo: {
                page: 1,
                pageSize: 10,
                startDate: moment().subtract(6, "days"),
                endDate: moment().add(1, 'days').format('YYYY-MM-DD'),
                type: "",
                relationNo: "",
                dealStatus: ""
            },
            messageLogs: [],
            types: [],
            status: []
        },
        created: function () {
            this.findMessageLog();
            this.findAllType();
            this.findAllStatus();
        },
        mounted: function () {
            this.init();
        },
        watch: {
            "queryInfo.page": function () {
                this.findMessageLog();
            },
            'queryInfo.startDate': function () {
                this.search();
            },
            'queryInfo.relationNo': function () {
                this.search();
            },
            'queryInfo.type': function () {
                this.search();
            },
            'queryInfo.dealStatus': function () {
                this.search();
            }
        },
        methods: {
            search: function () {
                this.queryInfo.page = 1;
                $('#pageMenu').page('destroy');//销毁分页
                this.findMessageLog();
            },
            findMessageLog: function () {
                var url = contentPath + "/api/view/messageLog/findByPage";
                this.$http.post(url, this.queryInfo).then(function (response) {
                    if (response.data.retcode == 2000000){
                        this.messageLogs = response.data.data.list;
                        console.log(this.messageLogs);
                        var temp = this;
                        $("#pageMenu").page({//加载分页
                            total: response.data.data.total,
                            pageSize: response.data.data.pageSize,
                            firstBtnText: '首页',
                            lastBtnText: '尾页',
                            prevBtnText: '上一页',
                            nextBtnText: '下一页',
                            showInfo: true,
                            showJump: true,
                            jumpBtnText: '跳转',
                            infoFormat: '{start} ~ {end}条，共{total}条'
                        }, response.data.data.page).on("pageClicked", function (event, pageIndex) {
                            temp.queryInfo.page = pageIndex + 1;
                        }).on('jumpClicked', function (event, pageIndex) {
                            temp.queryInfo.page = pageIndex + 1;
                        });
                    } else{
                        toastr.error("查询失败："+ response.data.msg, "查询结果");
                    }
                }, function (error) {
                    toastr.error("查询失败："+ error.body.msg, "查询结果");
                });
            },
            findAllType: function () {
                var url = contentPath + "/api/view/messageLog/findAllType";
                this.$http.get(url).then(function (response) {
                    if (response.data.retcode == 2000000){
                        this.types = response.data.data;
                    } else {
                        toastr.error("查询失败："+ response.data.msg, "查询类型结果");
                    }
                }, function (error) {
                    toastr.error("查询失败："+ error.body.msg, "查询类型结果");
                });
            },
            findAllStatus: function () {
                var url = contentPath + "/api/view/messageLog/findAllStatus";
                this.$http.get(url).then(function (response) {
                    if (response.data.retcode == 2000000){
                        this.status = response.data.data;
                    } else {
                        toastr.error("查询失败："+ response.data.msg, "查询状态结果");
                    }
                }, function (error) {
                    toastr.error("查询失败："+ error.body.msg, "查询状态结果");
                });
            },
            reset: function(id){
                var url = contentPath + "/api/view/messageLog/reset/"+id;
                this.$http.get(url).then(function () {
                    this.findMessageLog();
                }, function (error) {
                    toastr.error("重置失败："+ error.body.msg, "重置结果");
                });
            },
            init: function () {
                var weekStart = moment().subtract(6, "days");
                var yearStart = moment().startOf('year');
                var start = moment().subtract(1, "months");
                var end = moment();
                $("#dateTimeRange").daterangepicker({
                    applyClass: 'btn-sm btn-success',
                    cancelClass: 'btn-sm btn-default',
                    opens: 'right',
                    separator: ' - ',
                    showWeekNumbers: true,
                    //dateFormat: 'yyyy-mm-dd',
                    //format: 'YYYY-MM-DD',
                    startDate: weekStart,
                    endDate: end,
                    ranges: {
                        '今年': [yearStart, end],
                        // '今日': [moment().startOf('day'), moment()],
                        // '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                        // '最近7日': [moment().subtract(6, 'days'), moment()],
                        '最近30日': [start, end],
                        '本月': [moment().startOf("month"), moment().endOf("month")],
                        '上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                    },
                    locale: {
                        format: 'YYYY-MM-DD',
                        applyLabel: '确认',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        daysOfWeek: "日,一,二,三,四,五,六".split(","),
                        monthNames: "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一,十二月".split(","),
                        firstDay: 1
                    }
                }, function (start, end, label) {
                    app.queryInfo.startDate = start.format('YYYY-MM-DD');
                    app.queryInfo.endDate = end.format('YYYY-MM-DD');
                });
            }
        }

    });
</script>

</body>
</html>
